<template>
  <div class="page-index-container mini-scroll-bar" v-loading="spinning">
    <div class="header-layout">
      <RInfoBox title="Title">
        <div class="content-box">
          <div>5365</div>
          <RInfo title="子标题">35</RInfo>
        </div>
      </RInfoBox>
      <RInfoBox title="Title">
        <div class="content-box">
          <div>3,324</div>
          <RInfo title="新增">32</RInfo>
        </div>
      </RInfoBox>
      <RInfoBox title="Title">
        <div class="content-box">
          <div>￥ 3,515,352</div>
          <RInfo title="新增">3,512</RInfo>
        </div>
      </RInfoBox>
      <RInfoBox title="Title">
        <div class="content-box">36,050</div>
      </RInfoBox>
    </div>
    <div class="content-layout">
      <div class="content-body-container">
        <RInfoCard title="访问量">
          <LineChart />
        </RInfoCard>
        <RInfoCard title="综合分析">
          <PictorialBar />
        </RInfoCard>
        <RInfoCard title="销售额">
          <BarChart />
        </RInfoCard>
        <RInfoCard title="商品类型销售分析">
          <PieChart />
        </RInfoCard>
      </div>
      <div class="content-side-container">
        <RInfoCard title="最近登录记录">
          <RInfoList
            :data-source="sourceData.lastLogLogin"
            :field-names="{ key: 'infoId', label: 'userName', value: 'loginTime' }"
          >
            <template #value="item">
              <ATag :color="['#87d068', '#f50'][item.status]">{{ item.statusName }}</ATag>
              <span style="margin-right: 8px">{{ item.loginTime }}</span>
            </template>
          </RInfoList>
        </RInfoCard>
        <RInfoCard title="动态">
          <RInfoList
            :data-source="sourceData.lastLogOperate"
            :field-names="{ key: 'key', label: 'methodName', value: 'createTime' }"
          >
            <template #label="item">
              <div style="text-align: left">
                <div style="margin-bottom: 4px">{{ item.moduleName }}</div>
                <div style="font-size: 12px; color: #999999">{{ item.methodName }}</div>
              </div>
            </template>
            <template #value="item">
              <div style="text-align: right">
                <ATag :color="['#87d068', '#f50'][item.status]" style="margin-right: 0">{{ item.statusName }}</ATag>
                <div>{{ item.createTime }}</div>
              </div>
            </template>
          </RInfoList>
        </RInfoCard>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { RInfoList, RInfoCard } from '@/components/custom';
import { RInfo, RInfoBox } from './index-modules';

import { getIndexInfo } from '@/api';
import { useFetchData } from '@/hooks/index.js';
import { BarChart, LineChart, PictorialBar, PieChart } from '@/views/index-modules/charts/index.js';

const { sourceData, spinning, onFetchData } = useFetchData(getIndexInfo);

onMounted(() => {
  onFetchData();
});
</script>

<style lang="scss" scoped>
.page-index-container {
  width: 100%;
  height: 100%;
  padding: 16px;
  overflow: hidden scroll;
  display: flex;
  flex-direction: column;
  gap: 16px;

  .header-layout {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-gap: 16px;

    .content-box {
      width: 100%;
      height: auto;
    }
  }

  .content-layout {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 360px;
    grid-gap: 16px;
    align-items: self-start;

    .content-body-container {
      width: 100%;
      height: auto;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 16px;
    }

    .content-side-container {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
  }
}
</style>
